<template>
  <div class="hotel-page">
    <hotel-list :list="list" />
    <common-footer v-if="list.length" />
  </div>
</template>

<script>
import { mapGetters } from "vuex";

import HotelList from "@/components/hotel-list/index.vue";
import CommonFooter from "@/components/common-footer/index.vue";

export default {
  components: {
    HotelList,
    CommonFooter,
  },
  computed: {
    ...mapGetters({
      sanya: "sanyaHotel",
      dali: "daliHotel",
      lijiang: "lijiangHotel",
    }),
    list() {
      const { city = "sanya" } = this.$route.query;
      return this[city] || [];
    },
  },
  mounted() {
    this.$store.dispatch("fetchHotel");
  },
};
</script>

<style lang="less" scoped>
.hotel-page {
  padding: 0 78px;
}
</style>